import React from 'react';
import logo from '../../logo.svg';
import './myheader.css';
import 'antd/dist/antd.css'
import {Layout , Typography , Input} from 'antd'
import { Menu, Dropdown, Button, Space} from 'antd';
import {GlobalOutlined} from '@ant-design/icons';
import {RouteComponentProps,withRouter} from 'react-router-dom'
import {withTranslation,WithTranslation} from 'react-i18next';
import {changelanguageActionCreator} from "../../redux/Language/languageaction";
import {connect} from 'react-redux'
import {RootState} from "../../redux/store/store";
import {Dispatch} from 'redux'
const { Title ,Text} = Typography;
const {Search}=Input;
const mapStateToProps=(state:RootState)=>{
    return{
        language: state.language.language,
        languagelist: state.language.languagelist
    }
}
const mapDispatchToProps=(dispatch:Dispatch)=>{
    return{
        changelanguage(code:"zh"|"en"){
            const action=changelanguageActionCreator(code);
            dispatch(action);
        }
    }
}
class MyHeader extends React.Component <RouteComponentProps & WithTranslation & ReturnType<typeof mapStateToProps> &ReturnType<typeof mapDispatchToProps>>{

    menuclickhandle=(event:any)=>{
        this.props.changelanguage(event.key);
    }

    render(){
        const {t}=this.props;
        console.log(this.props.t)
        return (
            <div className="MyHeader">
                <div className="proheader">
                    <div className="headertop">
                        <Text className="headertext">{t("header.slogan")}</Text>
                        <Dropdown overlay={
                            <Menu onClick={this.menuclickhandle}>
                                {
                                    this.props.languagelist.map((item)=>(
                                        <Menu.Item key={item.code}>{item.name}</Menu.Item>
                                    ))
                                }
                            </Menu>
                        }  className="languageselect">
                            <Button>
                                {this.props.language==="en"?"English":"中文"} <GlobalOutlined />
                            </Button>
                        </Dropdown>

                        <Space size={0}  className="islogin">
                            <Button onClick={()=>{this.props.history.push('/register')}}>{t("header.register")}</Button>
                            <Button onClick={()=>{this.props.history.push('/login')}}>{t("header.signin")}</Button>
                        </Space>
                    </div>
                    <Layout.Header className="headersearch">
                        <Title level={3} className="headertitle">
                            <img src={logo} className="App-logo" alt="logo" />
                            {t("header.title")}
                        </Title>
                        <Search className="search" placeholder="请输入旅游目的地、主题、或关键字" enterButton />
                    </Layout.Header>
                    <Layout.Header className="tabbar">
                        <Menu mode={"horizontal"} className="topmenu">
                            <Menu.Item key="1">旅游首页</Menu.Item>
                            <Menu.Item key="2">周末游</Menu.Item>
                            <Menu.Item key="3">跟团游</Menu.Item>
                            <Menu.Item key="4">自由行</Menu.Item>
                            <Menu.Item key="5">私家团</Menu.Item>
                            <Menu.Item key="6">邮轮</Menu.Item>
                            <Menu.Item key="7">酒店+景点</Menu.Item>
                            <Menu.Item key="8">当地玩乐</Menu.Item>
                            <Menu.Item key="9">主题游</Menu.Item>
                            <Menu.Item key="10">定制游</Menu.Item>
                            <Menu.Item key="11">游学</Menu.Item>
                            <Menu.Item key="12">签证</Menu.Item>
                            <Menu.Item key="13">企业游</Menu.Item>
                            <Menu.Item key="14">高端游</Menu.Item>
                            <Menu.Item key="15">爱玩户外</Menu.Item>
                            <Menu.Item key="16">保险</Menu.Item>
                        </Menu>
                    </Layout.Header>
                </div>
            </div>
        )
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(withTranslation()(withRouter(MyHeader)));